<!-- 表情、文件选择等操作 -->
<template>
  <div class="operate-box">
    <chat-emoji class="item" ref="qqemoji" @select="rs => $emit('emoji', rs.imgStr)"></chat-emoji>
    <span class="item operate-icon video-icon"></span>
    <span class="item operate-icon record-icon"></span>
    <span v-if="false" class="item" @click="fileUpload_click('file')">
      <i class="iconfont fa fa-file-o"></i>
    </span>
    <form method="post" enctype="multipart/form-data">
      <input type="file" name="uploadFile" id="common_chat_opr_fileUpload"
             style="display: none;position: absolute;left: 0;top: 0;width: 0;height: 0;opacity: 0;"
      />
    </form>
  </div>
</template>

<script>
import ChatEmoji from './chat-emoji';

export default {
  name: 'operate-box',
  components: { ChatEmoji },
  data() {
    return {};
  },
  methods: {
    /**
     * qqemoji选中表情
     */
    // qqemoji_selectFace(rs) {
    //   this.setInputDiv(rs.imgStr);
    // },

    /**
     * 文件上传_点击
     */
    fileUpload_click: function (fileType) {
      document.getElementById('common_chat_opr_fileUpload').onchange =
        this.fileUpload_change;
      document.getElementById('common_chat_opr_fileUpload').click();
    },
  },
};
</script>

<style lang="scss" scoped>
.operate-box {
  display: flex;
  padding: 10px;
  text-align: left;
  position: relative;

  .operate-icon {
    width: 24px;
    height: 24px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
  }

  & > .item {
    margin-right: 12px;
    font-weight: normal;
    text-decoration: blink;
    cursor: pointer;

    &.video-icon {
      background-image: url("../../images/icon_video.png");
    }

    &.record-icon {
      background-image: url("../../images/icon_records.png");
      position: absolute;
      right: 0;
    }
  }
}

</style>
